<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Register</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-image: url("./img/bank2.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .container {
            display: flex;
        }

        .form-container {
            margin: 0 20px;
        }

        form {
            background-color: #f4f4f4;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
        }

        button {
            background-color: #4caf50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .nav {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            width: 100%;
            position: fixed;
            /* 固定位置 */
            top: 0;
        }
    </style>

    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="nav">
        <span>银行管理系统</span>
    </div>
    <div class="container">
        <div class="form-container">
            <form id="login-form">
                <h2>登录</h2>
                <label for="login-username">身份证Id:</label>
                <input type="text" id="login-username" name="login-username" required>
                <label for="login-password">密码:</label>
                <input type="password" id="login-password" name="login-password" required>
                <button type="button" onclick="login()">Login</button>
            </form>
        </div>
        <div class="form-container">
            <form id="register-form">
                <h2>注册</h2>
                <label for="register-username">身份证Id:</label>
                <input type="text" id="register-username" name="register-username" required>
                <label for="register-password">密码:</label>
                <input type="password" id="register-password" name="register-password" required>
                <button type="button" onclick="register()">Register</button>
            </form>
        </div>
    </div>

</body>
<script>
    function login() {
        var identifyId = jQuery("#login-username");
        var password = jQuery("#login-password");

        if(identifyId.val() == "") {
            alert("用户名为空");
            return false;
        }
        if(password.val() == "") {
            alert("密码为空");
            return false;
        }
        console.log("Login - Username: " + identifyId.val() + ", Password: " + password.val());
        jQuery.ajax({
            url:"/user/login",
            type:"POST",
            data:{
                "identifyId":identifyId.val(),
                "password":password.val()
            },
            success:function(result) {
                if(result.code==200) {
                    alert("登录成功");
                    location.href="service.html";
                } else {
                    alert("用户名或密码错误，请重新输入");
                    return;
                }
            }
        });
    }

    function register() {
        var identifyId = jQuery("#register-username");
        var password = jQuery("#register-password");
        if(identifyId.val() == "") {
            alert("用户名为空");
            return false;
        }
        if(password.val() == "") {
            alert("密码为空");
            return false;
        }
 
        // 实际应用中，这里应该发送注册请求到后端进行处理
        console.log("Register - Username: " + identifyId.val() + ", Password: " + password.val());
        jQuery.ajax({
            url:"/user/reg",
            type:"POST",
            data:{
                identifyId:identifyId.val(),
                password:password.val()
            },
            success:function(result) {
                if(result.code == 200) {
                    alert("注册成功");
                    identifyId = "";
                    password = "";
                } else if(result.code == -2) {
                    alert("注册失败，用户名已存在")
                } else {
                    alert("注册失败")
                }
            }
        });
    }
</script>

</html>